home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / Image & Music Effects / img-zoom-inout.izs < prev    next >
Text File  |  2005-07-30  |  2KB  |  69 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Image zoom in/out
  4. <!/TITLE>
  5.  
  6. <!DESCRIPTION>This is an impressive script that allows you to conveniently zoom in and out of an image. Functional in IE4+, NS6 and Opera 6+, the script does not push content around the image aside as it is zooming, unlike most similar scripts out there. You can even add the effect to multiple images on the same page!
  7. <!/DESCRIPTION> 
  8.  
  9. <!CATEGORY>img and music effects<!/CATEGORY>
  10.  
  11. <!SCRIPT>
  12. <!-- START OF SCRIPT -->
  13. <script language="JavaScript1.2">
  14.  
  15. var zoomfactor=0.05 //Enter factor (0.05=5%)
  16.  
  17. function zoomhelper(){
  18. if (parseInt(whatcache.style.width)>10&&parseInt(whatcache.style.height)>10){
  19. whatcache.style.width=parseInt(whatcache.style.width)+parseInt(whatcache.style.width)*zoomfactor*prefix
  20. whatcache.style.height=parseInt(whatcache.style.height)+parseInt(whatcache.style.height)*zoomfactor*prefix
  21. }
  22. }
  23.  
  24. function zoom(originalW, originalH, what, state){
  25. if (!document.all&&!document.getElementById)
  26. return
  27. whatcache=eval("document.images."+what)
  28. prefix=(state=="in")? 1 : -1
  29. if (whatcache.style.width==""||state=="restore"){
  30. whatcache.style.width=originalW
  31. whatcache.style.height=originalH
  32. if (state=="restore")
  33. return
  34. }
  35. else{
  36. zoomhelper()
  37. }
  38. beginzoom=setInterval("zoomhelper()",100)
  39. }
  40.  
  41. function clearzoom(){
  42. if (window.beginzoom)
  43. clearInterval(beginzoom)
  44. }
  45.  
  46. </script>
  47. <!-- CHANGE 99 to your image width, 100 to image height, and "myimage" to your image's name-->
  48. <a href="#" onmouseover="zoom(99,100,'myimage','in')" onmouseout="clearzoom()">Zoom In</a> | <a href="#" onmouseover="zoom(99,100,'myimage','restore')">Normal</a> | <a href="#" onmouseover="zoom(120,60,'myimage','out')" onmouseout="clearzoom()">Zoom Out</a>
  49. <div style="position:relative;width:99;height:100"><div style="position:absolute">
  50. <img name="myimage" src="me.gif">
  51. </div></div>
  52.  
  53. <!-- BEGIN SECOND BLOCK-->
  54.  
  55. <a href="#" onmouseover="zoom(120,60,'myimage2','in')" onmouseout="clearzoom()">Zoom In</a> | <a href="#" onmouseover="zoom(120,60,'myimage2','restore')">Normal</a> | <a href="#" onmouseover="zoom(120,60,'myimage2','out')" onmouseout="clearzoom()">Zoom Out</a>
  56. <div style="position:relative;width:120;height:60"><div style="position:absolute">
  57. <img name="myimage2" src="you.gif">
  58. </div></div>
  59. <!-- END OF SCRIPT -->
  60. <!/SCRIPT>
  61.  
  62. <!PREVIEW>
  63. <!-- START OF SCRIPT -->
  64.  
  65.  
  66. <!-- END OF SCRIPT -->
  67. <!/PREVIEW>
  68.  
  69. <!RELATED>NONE<!/RELATED>